<script setup>

import {Warning} from "@element-plus/icons-vue";
import {dayjs, ElMessage, ElMessageBox} from "element-plus";
import {reactive, ref} from "vue";
import {useAdminStore} from "@/stores/AdminStores.js";
import {usePublicStore} from "@/stores/PublicStores.js";
import {storeToRefs} from "pinia";

const loading = ref(false);

const adminStores = useAdminStore()
const publicStores = usePublicStore()
const {adminKey, userKeyLink} = storeToRefs(adminStores)
const {getKey} = adminStores
const {setKeys} = publicStores

const formParam = reactive({
  classes: 0,
  num: 0,
  date: dayjs().format("YYYY-MM-DD")
})

const formRef = ref(null);
const adminGetKey = async (data) => {
  formRef.value.validate(async (valid) => {
        if (!valid) return;
        loading.value = true;
        getKey(data, () => {
          setKeys(adminKey.value)
        }, () => loading.value = false)
      }
  )
}

const copyURL = () => {
  if (navigator.clipboard && navigator.clipboard.writeText()) {
    navigator.clipboard.writeText(userKeyLink.value).then(() => {
      ElMessage({
        message: '复制成功',
        type: 'success'
      })
    })
  } else {
    ElMessageBox.confirm(
        `需要您手动复制下面的连接进行分享\n${userKeyLink.value}`,
        '一键复制错误警告',
        {
          confirmButtonText: '已复制',
          cancelButtonText: '暂不复制',
          type: 'warning',
        }
    )
        .then(() => {
          ElMessage({
            type: 'success',
            message: '可以前往分享连接啦！',
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '系统或者硬件限制导致无法一键复制，所以您需要手动复制连接然后前往分享',
          })
        })
  }
}
</script>

<template>
  <el-form ref="formRef" :model="formParam" label-width="auto">
    <div>

    <el-form-item label="值班次数" prop="num"
                  :rules="[{ required: true, message: '必填项', trigger: 'blur' },
                  { type: 'number', min: 0, max: 59, message: '请输入0-60之间的数' }]">
      <el-input-number v-model.number="formParam.num" :min="0" :max="60" :controls="false"/>
      <el-tooltip placement="top">
        <template #content>
          <div>1. 设置每个学生的最多值班次数</div>
          <div>2. 次数最多不能超过60次</div>
        </template>
        <el-button link type="warning" :icon="Warning"></el-button>
      </el-tooltip>
    </el-form-item>

    <el-form-item label="值班人数" prop="classes"
                  :rules="[{ required: true, message: '必填项', trigger: 'blur' },
                  { type: 'number', min: 0, max: 59, message: '请输入0-60之间的数' }]">
      <el-input-number v-model.number="formParam.classes" :min="0" :max="60" :controls="false"/>
      <el-tooltip placement="top">
        <template #content>
          <div>1. 设置每节课理想的的值班人数</div>
          <div>2. 人数最多不能超过60人</div>
        </template>
        <el-button link type="warning" :icon="Warning"></el-button>
      </el-tooltip>
    </el-form-item>
    <el-form-item label="生成时间" prop="date" :rules="[{ required: true, message: '必填项' }]">
      <el-space>
        <el-date-picker v-model="formParam.date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"
                        :disabled-date="(e) => {
                            const current = dayjs().diff(dayjs(e.valueOf()), 'day');
                            return current > 0 || current <= -30;
                        }"/>
        <el-tooltip placement="top">
          <template #content>
            <div>1. 设置值班表的自动生成时间</div>
            <div>2. 设定时间不能超过当前时间30天</div>
          </template>
          <el-button link type="warning" :icon="Warning"></el-button>
        </el-tooltip>
      </el-space>
    </el-form-item>
    </div>

    <el-form-item v-if="adminKey">
      <el-alert title="密钥生成成功" type="success" :closable="false" center>
        <div style="text-align: center">
          <div>密钥：{{ adminKey }}</div>
          <div style="margin-top: 20px">
            <el-button @click="copyURL">复制上传网址</el-button>
          </div>
          <div>
            <el-link :href="`${userKeyLink}`">前往上传课程表</el-link>
          </div>
        </div>
      </el-alert>
    </el-form-item>
  </el-form>
  <el-footer>
    <el-button type="primary" @click="adminGetKey(formParam)" :loading="loading">密钥生成</el-button>
  </el-footer>
</template>

<style scoped>
.el-form, .el-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-form {
  flex-direction: column;
}
</style>